<template>
  <view class="user-center">
    <!-- 头部信息 -->
    <view class="header">
      <view class="avatar-container">
        <image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
        <view class="user-info">
          <text class="username">{{ name }}</text>
          <text class="user-id"><br>ID:{{ id }}</text>
        </view>
      </view>
    </view>
    <!-- 功能选项 -->
    <view class="function-item" @click="goToAddress">
      <image class="icon" src="../../static/icons/me1.png" mode="aspectFill"></image>
      <text class="item-text">我的地址</text>
    </view>
    <view class="function-item" @click="goToFollow">
      <image class="icon" src="../../static/icons/me2.png" mode="aspectFill"></image>
      <text class="item-text">我的关注</text>
    </view>
    <view class="function-item" @click="goToOrder">
      <image class="icon" src="../../static/icons/me3.png" mode="aspectFill"></image>
      <text class="item-text">我的订单</text>
    </view>
    <!-- 退出登录按钮 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      avatarUrl: '../../static/picture/head.jpg', // 默认头像路径
      name: '',
      id: '',
      addressIconUrl: 'https://example.com/address_icon.png',
      followIconUrl: 'https://example.com/follow_icon.png',
      orderIconUrl: 'https://example.com/order_icon.png',
      newName: '', // 用于临时存储新名字
      newAvatarPath: '' // 用于临时存储新的图片路径
    };
  },
  async onLoad() {
    try {
      const response = await axios.get('http://localhost:3000/user');
      // 假设接口返回的是包含多个用户数据的数组，这里取第一个用户数据
      const userData = response.data[0];
      if (userData) {
        this.name = userData.name;
        this.id = userData.userid;
        // 如果 user 数据中有头像地址，更新头像路径（当前数据未包含，这里仅保留逻辑）
        if (userData.avatarUrl) {
          this.avatarUrl = userData.avatarUrl;
        }
      }
    } catch (error) {
      console.error('获取用户数据失败:', error);
      uni.showToast({
        title: '获取用户数据失败，请稍后重试',
        icon: 'none'
      });
    }
  },
  methods: {
    goToAddress() {
      // 跳转到我的地址页面逻辑
      uni.navigateTo({
        url: '/pages/address/addressface'
      });
    },
    goToFollow() {
      // 跳转到我的关注页面逻辑
      uni.navigateTo({
        url: '/pages/follow/follow'
      });
    },
    goToOrder() {
      // 跳转到我的订单页面逻辑
      uni.switchTab({
        url: "/pages/order/order",
      });
    },
    logout() {
      // 退出登录逻辑，比如清除本地登录状态等
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储中的登录状态（如果有）
            uni.removeStorageSync('isLoggedIn');
            uni.navigateTo({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
page {
  background-color: #f8f8f8;
}

.user-center {
  padding: 15px;
  /* 限制宽度并居中 */
  max-width: 600px;
  margin: auto;
  margin-top: 20px;
}

.header {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4aa4f3;
  padding: 25px;
  border-radius: 10px;
  margin-bottom: 10px;
  height: 100px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  position: relative;
  margin-top: 30px; /* 下移头部蓝色框 */
}

.header:hover {
  transform: translateY(-5px);
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -50px;
  margin: auto; 
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.user-info {
  text-align: center;
}

.username {
  font-size: 20px;
  color: #333;
  margin-bottom: 8px;
}

.user-id {
  font-size: 16px;
  color: #666;
  white-space: pre-line;
}

.function-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
}

.function-item:hover {
  transform: translateY(-3px);
}

.icon {
  width: 25px;
  height: 25px;
  margin-right: 15px;
}

.item-text {
  font-size: 18px;
  color: #333;
}

.logout-btn {
  background-color: #4aa4f3;
  color: #fff;
  border: none;
  padding: 12px 25px;
  border-radius: 6px;
  width: 100%;
  font-size: 18px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease-in-out;
}

.logout-btn:hover {
  background-color: #4aa4f3;
}
</style>